import { useState } from 'react'
import './10_B站评论案例.less'
import { Input, Button } from 'antd'
import classNames from 'classnames'
/* 
    需求
        1.渲染评论列表
        2.删除评论实现
        3.渲染导航Tab和高亮实现
        4.评论列表排序功能实现
*/

export const day01_10 = () => {
    const user = {
        name: 'jack',
        uid: '2024090901',
    }
    const [commentList, setCommetList] = useState([
        {
            id: 1,
            auth: 'jack',
            uid: '2024090901',
            context: '这是一条评论回复',
            time: '2023-11-11',
            star: 11,
        },
        { id: 2, auth: 'tony', uid: '2024090902', context: '这是一条评论回复2', time: '2023-11-12', star: 22 },
        { id: 3, auth: 'milly', uid: '2024090903', context: '这是一条评论回复', time: '2023-11-13', star: 33 },
    ])
    const inputContent = useState('')

    const tabList = useState([
        { type: 'hot', label: '最热' },
        { type: 'time', label: '最新' },
    ])

    const [currentTab, setCurrentTab] = useState('hot')

    const handleDelete = (id: number) => {
        console.log(id)
        setCommetList(commentList.filter(item => item.id != id))
    }

    return (
        <div>
            <h3>10_B站评论案例</h3>
            <div className="comment">
                <div className="head">
                    <span className="commitTitle">评论</span>
                    <span className="commitNum">{commentList.length}</span>

                    <span
                        className={`sortByStar commitNum ${currentTab == 'hot' && 'currentTab'}`}
                        onClick={() => setCurrentTab('hot')}
                    >
                        最新
                    </span>
                    <span className="commitNum">|</span>
                    <span className="sortByStar commitNum">最热</span>
                </div>

                <div className="submitLine">
                    <div className="avata"></div>
                    <Input className="ipt" placeholder="发一条友善的评论" />
                    <Button className="btn" type="primary">
                        发布
                    </Button>
                </div>

                <div className="commentList">
                    {commentList.map(commentItem => (
                        <div key={commentItem.id} className="commentItem">
                            <div>{commentItem.auth}</div>
                            <div>{commentItem.context}</div>
                            <div>
                                <span>{commentItem.time}</span>
                                <span style={{ marginLeft: '20px' }}>{commentItem.star}</span>
                                {commentItem.uid == user.uid && (
                                    <Button
                                        type="link"
                                        style={{ marginLeft: '20px' }}
                                        onClick={() => handleDelete(commentItem.id)}
                                    >
                                        删除
                                    </Button>
                                )}
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    )
}
